<template>
  <div class="nav">
    <div class="nav_inner main-container">
      <ul>
        <li>
          <router-link to="/home"><a href="#">首页</a></router-link>
        </li>

        <li>
          <router-link to="/about"><a href="#">关于我们</a></router-link>
        </li>
        <li>
          <router-link to="/news"><a href="news.html">内容分享</a></router-link>
        </li>
        <li>
          <router-link to="/product"
            ><a href="product.html">产品中心</a></router-link
          >
        </li>
        <li>
          <router-link to="/master"
            ><a href="master.html">专家团队</a></router-link
          >
        </li>
        <li>
          <router-link to="/contact"
            ><a href="contact.html">联系我们</a></router-link
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup></script>

<style>
  /* nav */
  .nav {
    height: 60px;
    background-color: #362526;
  }

  .nav_inner {
    margin: 0 auto;
    position: relative;
  }

  .nav_inner ul {
    position: relative;
    display: flex;
    flex-direction: row;
  }

  .nav_inner ul li {
    flex-grow: 1;
    /* width: 198px; */
    line-height: 60px;
    /* float: left; */
    background-color: #482f30;
    border-right: 1px solid #362526;
  }

  .nav_inner ul li a {
    color: white;
    font-size: 16px;
    text-align: center;
    display: block;
  }
</style>
